/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, ScrollView, Image, PixelRatio, Dimensions, TouchableOpacity, ListView, AlertIOS } from 'react-native';
import { connect } from 'react-redux'
import { getAnime, soAnime } from '../../actions'
import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view';
const screenWidth = Dimensions.get('window').width;

// 一些常量设置  
const cols = 3;  
const cellWH = 120; 
const vMargin = (screenWidth - cellWH * cols) / (cols + 1);  
const hMargin = 10;  

//单元格组件
class Item extends Component {
	render() {
		const { id, pic, title, isDate, status } = this.props
	  	return (
			<View style={styles.innerViewStyle} key={id}>
				<Image resizeMode="contain" source={{uri: pic.replace('http://', 'https://')}} style={styles.iconStyle} /><Text numberOfLines={1}>{title}</Text>{isDate ? <Text style={{color:'#f60'}}>{status === '更新至0话' ? '完结' : status}</Text> : <Text>{status === '更新至0话' ? '完结' : status}</Text>}
			</View>
	  	);
	}
 }

class Anime extends Component {
	static navigationOptions = {
		title: '动漫大全'
	}
	constructor(props) {
		super(props)
		const ds = new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2})
		this.state = {
			today: '',
			soData: [],
			weekEng: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
			weekDay: new Date().getDay() - 1,
			weekCn: ['一', '二', '三', '四', '五', '六', '日'],
			dataSource: ds
		}
	}
	componentWillMount() {
		const { dispatch, _getAnime } = this.props
		_getAnime.data && _getAnime.data.length ? null : dispatch(getAnime());
		const { weekDay, weekEng } = this.state
		this.setState({
			today: weekEng[weekDay],
		})
	}

	getData(today){
		this.setState({
			today
		})
	}

	press(data) {
		alert("您选择了："+ data.title);
	}

	renderAnime(today){
		const Anime = this.props._getAnime.data[today]
        const AnimeList = Anime ? Anime.map((item,i) => {
            return <Item key={item.id} id={item.id} title={item.title} isDate={item.isDate} pic={item.vodPic} status={item.status} press={this.press.bind(this, item)}/>
        }) : <View style={styles.container}><Text style={styles.welcome}>Welcome to Home!</Text></View>
        return AnimeList
	}

	renderRow(rowData){
		const item = rowData
		console.info(rowData)
        return(
			<TouchableOpacity>
				<Item key={item.id} id={item.id} title={item.title} isDate={item.isDate} pic={item.vodPic} status={item.status}/>
			</TouchableOpacity>
        );  
    }  
	
	//<ScrollView key={item} tabLabel={weekCn[item]}><View style={styles.list}>{this.renderAnime(weekEng[item])}</View></ScrollView>

	render() {
		const { weekCn, weekEng, weekDay, today } = this.state
		const { _getAnime } = this.props
		const data = _getAnime.data || []
		return (
			<ScrollableTabView
				initialPage={weekDay}
				tabBarUnderlineColor='#ff6600'
				tabBarBackgroundColor='#ffffff'
				tabBarActiveTextColor='#ff6600'
				tabBarInactiveTextColor='#ff6600'
				tabBarTextStyle={{fontSize: 18}}
				renderTabBar={() => <ScrollableTabBar />}
			>
				{[0, 1, 2, 3, 4, 5, 6].map(item => 
					<ListView  
						dataSource={this.state.dataSource.cloneWithRows(data[weekEng[item]] || [])}
						renderRow={this.renderRow}  
						contentContainerStyle={styles.listViewStyle}
						key={item}
						tabLabel={weekCn[item]}
						enableEmptySections={true}
					/>
				)}
			</ScrollableTabView>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
	},
	welcome: {
		fontSize: 20,
		textAlign: 'center',
		margin: 10,
	},
	listViewStyle:{  
		// 改变主轴的方向  
		flexDirection:'row',  
		// 多行显示  
		flexWrap:'wrap',  
		// 侧轴方向  
		alignItems:'center', // 必须设置,否则换行不起作用  
	},  
	iconStyle:{  
		width:120,  
		height:150
	},  

	innerViewStyle:{  
		width:cellWH,
		height: 200,
		marginLeft:vMargin,
		marginTop:hMargin,
		// 文字内容居中对齐  
		alignItems:'center'  
	}
});


function mapStateToProps({getAnime}) {
    return {
        _getAnime: getAnime,
    }
}

export default connect(mapStateToProps)(Anime)